<template>
  <div class=" publicBox" id="equipmentNewbuildCSS">
<el-form ref="form" :rules="rules" :model="ruleForm" label-position="left" label-width="181px" class="demo-form-inline publicEditFrom">

<el-row>
     <div class="pubPageTagP">
               <p>设备品类管理/新建</p>
     </div>
</el-row>


<el-row>
<el-form-item label="设备类型" prop="typeid">
  <el-select v-model="ruleForm.typeid" filterable  placeholder="洗衣机" class="pubSlt">
    <el-option
      v-for="item in deviceTyp"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>
</el-row>

<el-row>
<el-form-item label="设备品牌" prop="brandid">
  <el-select v-model="ruleForm.brandid" filterable  placeholder="TCL" class="pubSlt">
    <el-option
      v-for="item in deviceBrand"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>
</el-row>

<el-row>
  <el-form-item label="设备型号"  prop="model">
            <el-input class="pubIptB" v-model="ruleForm.model"  placeholder="请输入设备型号"></el-input>
  </el-form-item>
</el-row>

<el-row>
  <el-form-item label="设备名称"  prop="name">
            <el-input class="pubIptB" v-model="ruleForm.name" placeholder="请输入设备名称"></el-input>
  </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
  <el-form-item>
            <el-button class="pubBtnBlue" type="primary" @click="submitForm('form')">提交</el-button>
            <el-button class="pubBtnGree" type="primary" @click="$canCleFn">取消</el-button>
  </el-form-item>
</el-row>

  </el-form>
  </div>
</template>

<script>
import * as API from "@api/equipmenter.js"
export default {
  components: {


  },
  data() {
    return {
      ruleForm:{
            typeid:null,
            brandid:null,
            model:'',
            name:''
          },
      rules: {
       typeid: [
            { required: true, message: '请选择设备类型', trigger: 'blur' },
          ],
       brandid: [
            { required: true, message: '请选择设备品牌', trigger: 'blur' },
          ],
       model: [
            { required: true, message: '请输入设备型号', trigger: 'blur' },
          ],
        name:[
            { required: true, message: '请输入设备名称', trigger: 'blur' }, 
          ]
      },
        disable:'',
        value:'',
        deviceTyp: [],
        deviceBrand:[]
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
     async addMent(){
       let res= await API.addMent(this.ruleForm)
              if(res.IsPositive){
                  this.$message.success({message:"操作成功"})
                  this.$router.push({path:'/platform/equipment/equipmenter'})
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
     },
     submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
               this.addMent()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

  },
  async created() {
      Promise.all([this.$getDeviceType(2,true),this.$getDeviceType(3,true)]).then(res=>{
               this.deviceTyp=res[0]
               this.deviceBrand=res[1]
      })

  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
@import "../../styles/less/public.less";
  #equipmentNewbuildCSS{

  }
</style>